<!-- ElementUI 表格 + 分页 -->
<template>
  <div>
    <!-- 表格 -->
    <el-table :data="students">
      <el-table-column label="编号" prop="id"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="性别" prop="sex"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :total="total"
      :page-size="queryDto.size"
      :current-page="queryDto.page"
      layout="prev,pager,next,sizes,->,total"
      :page-sizes="[5, 10, 15, 20]"
      @current-change="currentChange"
      @size-change="sizeChange"
    ></el-pagination>

  </div>
</template>
<script>
import axios from "../util/myaxios";
const options = {
  async mounted() {
    // 分页查询，获取学生数据
    this.query();
  },
  methods: {
    // 改变当前页调用方法
    currentChange(page) {
      // 修改页码
      this.queryDto.page = page;
      this.query(); // 修改后要重新查询
    },
    // 修改每页记录数
    sizeChange(size) {
      this.queryDto.size = size;
      this.query(); // 修改后要重新查询
    },
    // 发送分页查询
    async query() {
      const resp = await axios.get('api/students/q', {
        // 查询参数，拼接在 url 后面，get 方式请求没有请求体
        params: this.queryDto
      });
      this.students = resp.data.data.list;
      this.total = resp.data.data.total;
    }
  },
  data() {
    return {
      // 存放学生数据数组
      students: [],
      // 总记录数
      total: 0,
      // 分页数据
      queryDto: {
        page: 1,
        size: 5
      }
    };
  },
};
export default options;
</script>